<meta charset="UTF-8">
  <div class="content-wrapper">
    <section class="content-header">
      <h1 style="text-align:center">
        	操作记录
      </h1>
    </section>
    <section class="content" style='position: relative;'> 
         <div class="panel-body" style="padding-bottom:0px;">
						<div class="row searchdiv">
							
							<!--<div class="form-group col-lg-2 col-xs-6 space">
								<div class="input-group date">
								  <input type="text" class="form-control pull-right" id="datepicker" >
								  <div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								  </div>
								</div>
							</div>
							<div class="form-group col-lg-2 col-xs-6 space">
								<div class="input-group date">
								  <input type="text" class="form-control pull-right" id="datepicker2" >
								  <div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								  </div>
								</div>
							</div>-->
							<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 100px;vertical-align: middle;'>
									<input class="form-control" type="text" placeholder="请输入卡号 " ng-model="cardInfor" ><!--value='vid200000000001'-->
								</div>
								<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 100px;vertical-align: middle;'>
									<input class="form-control" type="text" placeholder="请输入姓名 " ng-model="myName" >
								</div>
							<div class='col-md-3'>
							 	<input type="text" class="form-control pull-right" id="reservation" ng-model="searchDate" style='text-align: center;'>
							 </div>
							<!-- 卡类型-->
							 <div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: auto;vertical-align: middle;'>
									 <select class="form-control" ng-model="cardKindId" ng-options='type.id as type.name for type in cardTypes'>
			            </select>
								</div>
                <div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: auto;vertical-align: middle;'>
									 <select class="form-control" ng-model="operationTypeId" ng-options='t.key as t.name for t in operationTypes'>
			            </select>
								</div>
							<div class="form-group col-lg-2 col-xs-6 space" >
                    <button type="submit" class="btn btn-default" style='padding: 6px 12px;' ng-click='search()'>
                    	<i class="fa fa-search"> 查询</i>
                    </button>
                </div>
								<!--<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 160px;vertical-align: middle;position: relative;'>
										<input  class="form-control" type="text" placeholder="请选择操作员" ng-model="cardInfor" readonly ng-click="seleOperator($event)">
										<span style='position: absolute;top: 0px;right: 0px;padding: 6px 10px;z-index: 10;' ng-click="clearSelectOperator()">
											<img src="../imgs/del.png" style='width: 15px;'/>
										</span>
			     			 </div>-->
			     			 <button style='margin-right: 3%;' class="btn pull-right" ng-click="download('operationTableExport','操作记录')"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>
			   </div>
			   
			<!--表格-->
			<div class="box" >
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table id='operationTable' style='width: 100%; position: relative;overflow: auto;height:450px; display: block;background: #ffffff;'  class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
	                <thead style='display: inline-table;width: 100%;'>
		                <tr role="row">
		                	<th    style="width: 25%;">卡号</th>
		                	<th  style="width: 8%;">姓名</th>
		                	<th   style="width: 10%;">卡类型</th>
		                	<th   style="width: 10%;">操作类型</th>
		                	<!--<th  style="width: 12%;">支付类型</th>-->
		                	<th   style="width: 5%;">金额</th>
		                	<!--<th   style="width: 9%;">操作人</th>-->
		                	<th  style="width: 9%;">操作时间</th>
		                </tr>
	                </thead>
	              <tbody style='display: inline-table;width: 100%;'>
			                <tr style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="opt in items">
				                  <td style="width: 25%;">{{opt.cardChipNo}}</td>
				                  <td style="width: 8%;" >{{opt.userName}}</td>
				                  <th   style="width: 10%;">{{opt.cardTypeName}}</th>
				                  <td style="width: 10%;">{{opt.name}}</td>
				                  <!--<td style="width: 12%;">{{opt.payment_type}}</td>-->
				                  <td style="width:5%;">{{opt.value}}</td>
								  				<!--<td style="width: 9%;" >{{opt.opt_user}}</td>-->
								  				<td style="width: 9%;" >{{opt.createFmt}}</td>
			                </tr>
	                </tbody>
	                <tfoot>
	                </tfoot>
              </table>
              <table id='operationTableExport' style='z-index:-100;width: 100%; position: fixed;overflow: scroll;height:450px; display: block;background: #ffffff;' id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
	                <thead style='display: inline-table;width: 100%;'>
		                <tr role="row">
		                	<th    style="width: 12%;">卡号</th>
		                	<th  style="width: 8%;">姓名</th>
		                	<th   style="width: 10%;">操作类型</th>
		                	<th  style="width: 12%;">支付类型</th>
		                	<th   style="width: 12%;">金额</th>
		                	<th   style="width: 9%;">操作人</th>
		                	<th  style="width: 9%;">操作时间</th>
		                </tr>
	                </thead>
	              <tbody style='display: inline-table;width: 100%;'>
			                <tr style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="opt in data">
				                  <td style="width: 12%;">{{opt.card_no}}</td>
				                  <td style="width: 8%;" >{{opt.user_name}}</td>
				                  <td style="width: 10%;">{{opt.opt_type}}</td>
				                  <td style="width: 12%;">{{opt.payment_type}}</td>
				                  <td style="width: 12%;">{{opt.price}}</td>
								  				<td style="width: 9%;" >{{opt.opt_user}}</td>
								  				<td style="width: 9%;" >{{opt.opt_time}}</td>
			                </tr>
	                </tbody>
	                <tfoot>
	                </tfoot>
              </table>
              </div>
              </div>
              <div class="row" style="margin-bottom:10px;">
              	<div class="col-sm-3">
              		<div class="dataTables_info" id="example1_info" role="status" aria-live="polite">总条目数：{{totalNums}}</div>
              	</div>
                <div class="col-sm-9">
                	<div class="dataTables_paginate paging_simple_numbers row" id="example1_paginate">
                		<label style="font-weight:normal;float:left;padding-right:15px;">每页显示数目 
                			<input  readonly  class="form-control input-sm" style='border: none;width: 60px;background-color: #FFFFff !important;' ng-model="initial"/>
                			<!--<select name="example1_length" aria-controls="example1" class="form-control input-sm" ng-change="change(initial)" ng-model="initial" > 
                				<option value="10">10</option> 
                				<option value="25">25</option>
                				<option value="50">50</option>
                				<option value="100">100</option>
                			</select>-->
                		</label>
                		<ul class="pagination col-lg-7" style='cursor: pointer;'>
                			<li class="paginate_button previous " id="example1_previous" >
                				<a  ng-click="Previous2()">上一页</a>
                			</li>
                			<li   ng-repeat="page in pageList" ng-class="{active: isActivePage2(page)}"><!-- class=" paginate_button active" -->
                				<a  ng-click="selectPage2(page)">{{page}}</a>
                			</li>
                			<li class="paginate_button next" id="example1_next">
                				<a  ng-click="Next2()">下一页</a>
                			</li>
                		</ul>
                	</div>
                </div>
              </div>
              </div>
            </div>
      </div>
	</section>
</div>
<!-- 选择操作员modal -->
<div class="modal fade" id="selectOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center" >选择员工</h4>
      </div>
      
      
     <!--表格-->
			<div class="box" style='width: 94%;  display: inline-block;'>
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table style='width: 100%; position: relative;overflow: scroll; display: block;background: #ffffff;height:440px' id="example1" 
              		class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"><!--min-height: 300px; max-height: 500px;-->
                <thead style='display: inline-table;width: 100%;'>
	                <tr role="row">
	                	<th  style="width: 8%;" >用户名</th>
	                	<th  style="width: 10%;">姓名</th>
	                	<th  style="width: 12%;">手机号</th>
	                </tr>
                </thead>
              <tbody id='selectOperator' style='display: inline-table;width: 100%;' >
		                <tr ng-click="operatorSelected($event)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="item in operators">
			                  <td style="width: 8%;" >{{item.orderName}}</td> 
			                  <td style="width: 10%;">{{item.userName}}</td>
			                  <td style="width: 12%;">{{item.mobile}}</td>
		                </tr>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
              </div>
              </div>
              </div>
            </div>
      </div>
      
      
      
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click="trueSelectOperator()">确定</button>
      </div>
    </div>
  </div>
</div>

<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 !important;}
	.even{background-color: transparent !important;}
	.btn{    padding: 10px 12px;}
</style>
<script>
					$(document).ready(function() {
							
//							$('#table_example').hide();
  							//$('#example').dataTable();
					} );
					
				
	
</script>